iT邦幫忙

0

VueCLI3 axios 全域配置

  • 分享至 

  • xImage
  •  

大綱

  • 安裝
  • vue-axios 全域使用
  • 結合 Vuex action 使用

安裝

  npm i --save axios
  npm i vue-axios 

vue-axios 方法

  • 寫於 main.js
  • 元件中 使用 this.axios
  // 於 main.js 引用
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  Vue.use(VueAxios, axios)

  // 於 元件 生命週期中 使用 axios api call
  mounted() {
    this.axios.get('http://localhost:3000/users')
      .then((res) => { console.table(res.data) })
      .catch((error) => { console.error(error) })

    this.axios({
      method: 'get',
      baseURL: 'http://localhost:3000',
      url: '/users',
      'Content-Type': 'application/json',
    })
      .then((result) => { console.log(result.data) })
      .catch((err) => { console.error(err) })
  },

Vuex action & axios 實體

  //  引入 Vuex store.js
  import axios from 'axios'
  
  // 建立 axios 實體 統一管理 config
  const userRequest = axios.create({
    baseURL: 'http://localhost:3000',
    headers: { 'Content-Type': 'application/json' },
  })
  
  // store.js  action 撰寫 api call
  actions: {
    getUsers() { return userRequest.get('/users') },
  },

  // 元件生命週期中 使用 dispatch 呼叫該 api
  created(){
    this.$store.dispatch('getUsers')
      .then((result) => { console.table(result.data) })
      .catch((err) => { console.error(err) })
  }

參考資料


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言